<template>
	<div class="bgc" style="overflow-y:auto;" id="body-hp">
		<HeaDer></HeaDer>
    <div class="breadcrumb">
      <div class="breadcrumb-a">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户注册</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="bgcc">
      <h2>账户信息</h2>
      <el-form :model="registerForm" status-icon :rules="registerRules" ref="registerForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username" >
          <el-input v-model="registerForm.username" clearable autocomplete="off" style="width:350rem;" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input type="password" v-model="registerForm.password" autocomplete="off" style="width:350rem;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" >
          <el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off" style="width:350rem;"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName"  >
          <el-input v-model="registerForm.nickName" clearable autocomplete="off" style="width:350rem;"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code"  >
          <el-input v-model="registerForm.code" clearable style="width:200rem;"></el-input>
          <div @click="refreshCode()" class="code" style="cursor:pointer;margin-left:211rem;margin-top:-47rem;" title="点击切换验证码">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-form-item>
        <h2>企业信息</h2>
        <el-form-item label="企业名称" prop="deptName"  >
          <el-input v-model="registerForm.deptName" clearable autocomplete="off" style="width:350rem;"></el-input>
        </el-form-item>
        <el-form-item label="企业类型" required>
          <el-radio-group v-model="registerForm.companyType">
            <el-radio :label="0">工业企业</el-radio>
            <el-radio :label="1">服务机构</el-radio>
            <el-radio :label="2">园区平台</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
  
      <el-button type="success" plain @click.native.prevent="handleRegister" style="width:200px;margin:0rem 120rem;">注 册</el-button><br/>
    </div>
		<FooTer></FooTer>
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import SusPension from '../../components/HomePage/suspension'
import sIdentify from '../../components/HomePage/sIdentify'
import { getCodeImg, register } from "@/api/login";
export default {
	name: "body-hp",
	data () {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const chenkeCode = (rule, value, callback) => {
      if (this.identifyCode!== value) {
        callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };
		return {
      // input:'',//账号
      // password:'',//密码
      // code:'',//验证码
      identifyCode: "",
      identifyCodes: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d'], //根据实际需求加入自己想要的字符
      registerForm: {
        username: "",
        nickName:"",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: "",
        deptName:"",
        companyType:0
      },
        registerRules: {
          username: [
            { required: true, trigger: "blur", message: "请输入您的账号" },
            { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
          nickName: [
            { required: true, trigger: "blur", message: "请输入您的昵称" },
            { min: 2, max: 20, message: '用户昵称长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
          
          password: [
            { required: true, trigger: "blur", message: "请输入您的密码" },
            { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, trigger: "blur", message: "请再次输入您的密码" },
            { required: true, validator: equalToPassword, trigger: "blur" }
          ],
          code: [{ required: true, trigger: "change", message: "请输入验证码" },
              { required: true, validator: chenkeCode, trigger: "blur" }
          ],
          deptName: [
            { required: true, trigger: "blur", message: "请输入您的企业名称" },
            { min: 1, max: 30, message: '企业名称长度必须介于 1 和 30 之间', trigger: 'blur' }
          ],
        },
      };
	},
  components: {
		HeaDer,
		FooTer,
		SusPension,
    sIdentify
	},
	methods: {
    // getCode() {
    //   getCodeImg().then(res => {
    //     this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    //     if (this.captchaEnabled) {
    //       this.codeUrl = "data:image/gif;base64," + res.img;
    //       this.registerForm.uuid = res.uuid;
    //     }
    //   });
    // },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              if(this.registerForm.companyType==0){//工业企业
                this.$router.push("/eplogin");
              }else if(this.registerForm.companyType==1){//机构
                this.$router.push("/agencylogin");
              }else  if(this.registerForm.companyType==2){
                this.$router.push("/parklogin");
              }
              
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          })
        }
      });
    },
	  // 生成随机数
    randomNum(min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 更新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      this.registerForm.code = "";
      console.log('当前验证码:',this.identifyCode);
    },
    
    // 随机生成验证码字符串
    makeCode(data, len) {
      console.log('data, len:', data, len)
      for (let i = 0; i < len; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length-1)]
      }},
    //   //登录按钮处验证
    // reshCode() {
    //   if (this.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
    //   this.$message.error('请填写正确验证码')
    //       this.refreshCode()
    //       return
    //     }
    //    this.$message.error('恭喜注册成功')
        
    //   },
      
    },
mounted() {
    this.refreshCode()
 },
	created() {
    this.getCode();
	},
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
.space-around{
  display: flex;
  justify-content: space-around ;
}
.space-between{
  display: flex;
  justify-content: space-between;
}
.center{
  display: flex;
	justify-content: center;
}
.bgc{ 
  .breadcrumb{
    background-color:#F8F9FB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .breadcrumb-a{
      margin-left: auto;margin-right: auto;width:1532rem;padding:20rem 0;
    }
  }
}
.bgcc{ 
	// background:url(../../assets/images/eplogin/111_04.jpg) no-repeat scroll;
  background-size:100%;
	width: 1920rem;
	// height: 662rem;
  font-size: 14rem;
  padding:20px;
  background-color:#F8F9FB;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-left: auto;
  margin-right: auto;
  width:520rem;
  margin-top:50rem;
  margin-bottom:70rem;
}
/* 回到顶部 end*/
.body-hp{
	height:100%;
	width:100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;
	color:#676767;
}
</style>